import React, { PureComponent } from 'react';
import { exportTable, renderTable } from './util';

const apperance = {
  cursor: 'pointer',
  padding: '0 15px',
  fontSize: '14px',
  borderRadius: '4px',
  color: '#fff',
  height: '32px',
  backgroundColor: '#1890ff',
  borderColor: '#1890ff',
  textShadow: '0 -1px 0 rgba(0,0,0,0.12)',
  boxShadow: '0 2px 0 rgba(0,0,0,0.045)',
};

class ExportTableToExcel extends PureComponent {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  exportTable() {
    const { fileName } = this.props;
    const table = this.myRef.current.innerHTML;
    exportTable(table, fileName);
  }

  render() {
    const { children, data, style } = this.props;
    return (
      <div>
        <button style={{ ...apperance, ...style}} onClick={this.exportTable.bind(this)}>
          导出
        </button>
        <div className="exportTableToExcel" style={{ display: 'none' }} ref={this.myRef}>
          {children && children}
          {data && renderTable(data)}
        </div>
      </div>
    );
  }
}

export default ExportTableToExcel;
